<ul ngbNav
    #nav="ngbNav"
    [activeId]="route.snapshot.fragment"
    (navChange)="setFragment($event.nextId)"
    class="nav-tabs">
  <li ngbNavItem="active-alerts">
    <a ngbNavLink
       i18n>Active Alerts</a>
    <ng-template ngbNavContent>
      <cd-active-alert-list *ngIf="isAlertmanagerConfigured"></cd-active-alert-list>
      <cd-alert-panel type="info"
                      i18n
                      *ngIf="!isAlertmanagerConfigured">To see all active Prometheus alerts, please
        provide the URL to the API of Prometheus' Alertmanager as described in the
      <a href="{{docsUrl}}"
         target="_blank">documentation</a>.</cd-alert-panel>
    </ng-template>
  </li>
  <li ngbNavItem="all-alerts">
    <a ngbNavLink
       i18n>All Alerts</a>
    <ng-template ngbNavContent>
      <cd-rules-list *ngIf="isPrometheusConfigured"
                     [data]="prometheusAlertService.rules"></cd-rules-list>
      <cd-alert-panel type="info"
                      *ngIf="!isPrometheusConfigured">To see all configured Prometheus alerts,
        please provide the URL to
        the API of Prometheus as described in the
      <a href="{{docsUrl}}"
         target="_blank">documentation</a>.</cd-alert-panel>
    </ng-template>
  </li>
  <li ngbNavItem="silences">
    <a ngbNavLink
       i18n>Silences</a>
    <ng-template ngbNavContent>
      <cd-silences-list *ngIf="isAlertmanagerConfigured"></cd-silences-list>
      <cd-alert-panel *ngIf="!isAlertmanagerConfigured"
                      type="info"
                      i18n>To enable Silences, please provide the URL to the API of the Prometheus' Alertmanager as
        described in the
      <a href="{{docsUrl}}"
         target="_blank">documentation</a>.</cd-alert-panel>
    </ng-template>
  </li>
</ul>

<div [ngbNavOutlet]="nav"></div>
